<template>
  <div class="sys_info h100">
    <!-- :style="{ backgroundImage: $gbUrl($imgCatelog.sys.msg.bg) }" -->
    <div class="tab-list">
      <div
        class="text-btn-item"
        :class="{ active: item.value === tabValue }"
        v-for="item of tabList"
        :key="item.label + item.value"
        @click="handleTab(item.value)"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="text-btn-clear" @click="handleClear">清除信息</div>
    <div class="content  beautify-scroll" ref="sysInfoContent">
      <div
        class="item"
        v-for="(item, index) of sysInfoList"
        :key="'sys_info' + index"
      >
        <span class="head" :class="{ isPlayer: item.source === 1 }"
          >[{{ $filters.parseToTime(item.timestamp) }}]{{
            sourceType[item.source]
          }}<span v-if="item.source === 1">({{ item.name }})</span>：</span
        ><span class="message" :class="type[item.type]">{{
          item.content
        }}</span>
        <template v-if="item.equip && item.equip.length">
          <template v-for="o of item.equip" :key="o.id">
            <ewg-tooltip>
              <span class="equip equipName" :class="'grade' + o.grade">
                [{{ o.name }}]
              </span>
              <template v-slot:content>
                <equip-tooltip :equip="o"></equip-tooltip>
              </template>
            </ewg-tooltip>
          </template>
        </template>
      </div>
    </div>
    <input
      class="input"
      type="text"
      v-model="textMsg"
      @keyup.enter="handleSend"
      placeholder="输入文字回车发送"
    />
  </div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  ref,
  watch
} from "vue";
import { useStore } from "@/store";
import { SysInfo, sysInfoMap } from "@/const/sys";
import { SysActionTypes } from "@/store/sys/action-types";
import { WsDTO } from "@/const/ws";
import { MutationTypes } from "@/store/sys/mutation-types";
const store = useStore();
export default defineComponent({
  name: "sysInfo",
  setup() {
    const sysInfoContent = ref(null);
    const textMsg = ref("");
    const tabValue = ref(-1);
    const scrollToBootom = (el: any) => {
      el.value.scrollTop = el.value.scrollHeight;
    };
    const sysInfoList = computed(() => {
      return store.state.sysInfo.filter(m => {
        if (tabValue.value !== -1) {
          return tabValue.value === m.source;
        }
        return true;
      });
    });
    const sourceType = reactive(sysInfoMap.sourceType);
    const type = reactive(sysInfoMap.type);
    watch(store.state.sysInfo, () => {
      nextTick(() => {
        scrollToBootom(sysInfoContent);
      });
    });
    onMounted(() => {
      scrollToBootom(sysInfoContent);
    });
    const handleClear = () => {
      store.commit(MutationTypes.CLEAR_SYS_INFO, tabValue.value);
    };
    const handleSend = () => {
      if (textMsg.value) {
        const body = {
          code: 0,
          data: new SysInfo(
            textMsg.value,
            5,
            null,
            1,
            store.state.userInfo.userName
          )
        };
        const data = new WsDTO(
          store.state.userInfo.userName,
          body,
          1,
          0
        ).ObjectToString();
        store.dispatch(SysActionTypes.SYS_WS_SEND, data);
        textMsg.value = "";
      }
    };
    const handleTab = (v: number) => {
      tabValue.value = v;
    };
    return {
      sysInfoList,
      sysInfoContent,
      sourceType,
      type,
      textMsg,
      handleSend,
      handleClear,
      tabValue,
      handleTab,
      tabList: [
        {
          label: "全部",
          value: -1
        },
        {
          label: "世界",
          value: 1
        },
        {
          label: "系统",
          value: 0
        }
      ]
    };
  }
});
</script>

<style lang="scss" scoped>
.sys_info {
  box-sizing: border-box;
  padding: 5px;
  display: flex;
  flex-direction: column;
  position: relative;
  background: linear-gradient(135deg, #002623, #360940, #1e0a12);
  box-shadow: 0 0 10px 0px $--color-earthy inset;
  border: 5px solid $--color-earthy;
  padding-top: 40px;

  .content {
    flex: 1;
    box-sizing: border-box;
    padding: 8px;

    overflow: hidden auto;
    .item {
      color: #333;
      font-size: 14px;
      word-break: break-all;
      margin-bottom: 8px;
      // text-shadow: 0 0 4px rgba(0, 0, 0, 1);
      .head {
        color: $--color-yellow;
        &.isPlayer {
          color: $--color-pitwhite;
        }
      }
      .message {
        color: #333;
        &.default {
          color: #333;
        }
        &.warn {
          color: $--color-red;
        }
        &.tip {
          color: $--color-green;
        }
        &.win {
          color: $--color-blur;
        }
        &.battle {
          color: $--color-orange;
        }
        &.player {
          color: $--color-pitwhite;
        }
      }
      .equip {
        margin-left: 5px;
        cursor: pointer;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
  .tab-list {
    position: absolute;
    top: 12px;
    left: 12px;
    width: auto;
    display: flex;
    .text-btn-item.active {
      color: $--color-white;
    }
  }
  .text-btn-clear {
    position: absolute;
    top: 12px;
    right: 12px;
    font: 14px;
  }
}

.input {
  display: block;
  height: 40px;
  padding: 0 10px;
  outline: 0;
  background: transparent;
  color: $--color-white;
  border: 0;
}
</style>
